<!doctype html><!--声明当前文档为html文档-->
<!--
	标记语言
	99%的标签都是成对出现的
-->
<html>
	<head><!--头部-->
		<meta charset="utf-8"><!--字符编码:utf-8国际编码  gbk 中文编码-->
		<title>图片懒加载特效</title>
		<meta name="Keywords" content="关键词1,关键词2">
		<meta name="description" content="描述">
		<style>/*css样式表的盒子*/
		*{/*通用选择器:选择到所有的元素*/
			margin:0px;/*外边距*/padding:0px;/*内边距*/
		}
		#box{
		width:940px;/*宽度*//*height:100px;高度*/
		/*background:#663333;背景颜色*/
		margin:100px auto;/*上下为100px 左右居中*/
		}
		
		ul li{
			list-style:none;/*去除前面的实心圆点*/
			width:288px;height:225px;
			/*background:red;*/
			float:left;/*浮动:左浮动*/
			margin:10px 12px;
		}
		.title{
			width:288px;height:40px;
			text-align:center;/*文本对齐方式:水平居中*/
			line-height:40px;/*行高*/
			box-shadow:0px 0px 10px #000;/*阴影:左右偏移,上下偏移,模糊度,颜色*/
		}
		ul li img:hover{/*鼠标悬停在上面实现什么效果*/
			opacity:0.5;/*透明度:0-1之间*/
		}
		</style>
	</head>
	<body><!--身体-->
		<!--盒子模型标签：有宽度有高度-->
		<div id="box"><!--id名 唯一的 class类名可重复的-->
			<ul><!--无序列表标签-->
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/1.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/2.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/3.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/4.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/5.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/6.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/7.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/8.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/9.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/10.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/11.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/12.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/13.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/14.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/15.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/16.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/17.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/18.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/19.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/20.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
				<li>
					<!--img四要素:width height src alt-->
					<img src="images/21.jpg" width="288" height="180" alt="美女">
					<div class="title">
						绿丛小花精美摄影
					</div>
				</li>
			</ul>
		</div>
		<!--
			能不到服务端去获取数据就尽量不去
			能只下载一张图片的坚决不下载多张图片
			能用css实现的效果就不要用js
		-->
		
	</body>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/lazyload.js"></script>
	<script type="text/javascript">
		//jquery的懒加载插件实现懒加载效果
		var lazyload = $.noConflict();//定义一个变量来保存懒加载插件
		//json对象
		lazyload(function(){
			lazyload("img").lazyload({placeholder:"images/lazyload.png",effect:"fadeIn"});
		})
	</script>
</html>
